<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<title>使用ajax局部刷新出数据</title>
		<script type="text/javascript" src="jquery/jquery-3.6.0.js"></script>
		<style>
            #fyInfo a {
                text-decoration: none;
                display: inline-block;
                color: black;
                line-height: 25px;
                padding: 0 16px;
                margin-top: 10px;
            }

            #fyInfo a:hover {
                background-color: cadetblue;
            }
		</style>
		<script>

            var pn = 1;
            var ps = 2;
            var lp;

            $(function () {
                $("#subBtn").click(function () {
                    getUserPage();
                })
            })

            function getUserDetails(uId) {
                $.ajax({
                    url: "user",
                    data: {
                        uid: uId,
                        operation: "getUserDetail",
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        var html = "";

                        html += '<table border="1px solid cadetblue" cellpadding="5px" width="500px" style="align: center ">';
                        html += '<tr>';
                        html += '<td width="25%">编号:</td>';
                        html += '<td width="25%">' + data.id + '</td>';
                        html += '<td width="25%">名称:</td>';
                        html += '<td width="25%">' + data.name + '</td>';
                        html += '</tr>';
                        html += '<tr>';
                        html += '<td>密码:</td>';
                        html += '<td colspan="3">' + data.password + '</td>';
                        html += '</tr>';

                        if (data.addresses.length > 0) {
                            $.each(data.addresses, function (i, n) {
                                html += '<tr>';
                                html += '<td>地址:</td>';
                                html += '<td colspan="3">省:' + n.province + '---市:' + n.city + '---县/区:' + n.county + '</td>';
                                html += '</tr>';
                            })
                        }
                        html += '</table>';
                        $("#userDetails").html(html);
                    }
                })
            }

            function getUserPage() {
                $.ajax({
                    url: "user",
                    data: {
                        name: $("#name").val(),
                        operation: "getUserPage",
                        pageNum: pn,
                        pageSize: ps
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        //console.log(data);

                        lp = data.pageTotalNum;

                        //需要返回该姓名对应的这条记录
                        var html = "";

                        $.each(data.dataList, function (i, n) {
                            html += '<tr>';
                            html += '<td style="width: 20%">' + n.id + '</td>';
                            html += '<td style="width: 20%">' + n.name + '</td>';
                            html += '<td style="width: 30%">' + n.password + '</td>';
                            html += '<td style="width: 30%"><a href="javascript:void(0);" onclick="getUserDetails(' + n.id + ')">详情</a>/<a href="javascript:void(0);" onclick="updateUser(' + n.id + ')">修改</a>/<a href="javascript:void(0);" onclick="deleteUser(' + n.id + ')">删除</a></td>';
                            html += '</tr>';
                        })
                        $("#dataList").html(html);
                        $("#pageInfo").html("总共" + data.totalRows + " 当前" + data.pageNum + "/" + data.pageTotalNum + "页");

                        fyNum();

                    }
                })
            }

            function deleteUser(uId) {
                var cf = confirm("是否要删除该条记录")

                if (cf) {
                    $.ajax({
                        url: "user",
                        data: {
                            uId: uId,
                            operation: "deleteUserById",
                        },
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                alert("删除成功");

                                //刷新页面
                                getUserPage();
                            } else {
                                alert("删除失败")
                            }
                        }
                    })
                }
            }

            function goPage(n) {
                if (n < 1) {
                    alert("当前已经是首页了!");
                    return;
                }
                if (n > lp) {
                    alert("当前已经是末页了!")
                    return;
                }
                pn = n;
                getUserPage();
            }

            function goPageByNum() {
                var pageNumInput = $("#pageNum").val();
                goPage(pageNumInput);
            }

            function selectChange(e) {
                ps = $(e).val();
                goPage(pn);
            }

            //显示分页的数字
            function fyNum() {
                var str = "";
                if (pn <= 3) {
                    for (var i = 1; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }
                if (pn > 3) {
                    for (var i = pn - 2; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }
                if (pn <= lp - 2) {
                    for (var i = pn + 1; i <= pn + 2; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }

                if (pn > lp - 2) {
                    for (var i = pn + 1; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }

                $("#fyNum").html(str);
            }

            function saveUser() {

                //1.正则判断,验证表单中的字段是否符合规范

                //2.获取表单数据
                var userData = $("#userForm").serializeArray();//会把表单中所有的字段序列化数组
                userData.push({name: "operation", value: "saveOrUpdateUser"});
                //3.发送ajax请求
                $.ajax({
                    url: "user",
                    data: userData,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            alert("保存成功");

                            //刷新页面到首页
                            pn = 1;
                            getUserPage();

                            resetForm($("#userForm"))
                        } else {
                            alert("保存失败")
                        }
                    }
                })
                return false;
            }

            function resetForm(e) {
                $(e).find("input[type=text]").val("");
                $(e).find("input[type=hidden]").val("");
            }

            function updateUser(uId) {
                $.ajax({
                    url: "user",
                    data: {
                        uid: uId,
                        operation: "getUserDetail",
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        $($("#userForm")).find("input[name=id]").val(data.id);
                        $($("#userForm")).find("input[name=fullname]").val(data.name);
                        $($("#userForm")).find("input[name=password]").val(data.password);

                    }
                })
            }

		</script>
	</head>
	<body>
		<form>
			<label for="name">名称:</label>
			<input name="name" id="name">
			<input type="button" value="查询" id="subBtn">
		</form>
		<table cellpadding="0px" border="1px solid cadetblue" style="border: 1px solid cadetblue;width: 500px; ">
			<thead>
			<tr>
				<th style="width: 20%">id</th>
				<th style="width: 20%">name</th>
				<th style="width: 30%">password</th>
				<th style="width: 30%">操作</th>
			</tr>
			</thead>
			<tbody id="dataList">


			</tbody>
		</table>

		<div id="fyInfo">
			<a href="javascript:void(0);" onclick="goPage(1)">首页</a>
			<a href="javascript:void(0);" onclick="goPage(pn-1)">上一页</a>

			<span id="fyNum">
				<%--<a href="javascript:void(0);" onclick="goPage(1)">1</a>
				<a href="javascript:void(0);" onclick="goPage(2)">2</a>
				<a href="javascript:void(0);" onclick="goPage(3)">3</a>
				<a href="javascript:void(0);" onclick="goPage(4)">4</a>--%>
			</span>

			<a href="javascript:void(0);" onclick="goPage(pn+1)">下一页</a>
			<a href="javascript:void(0);" onclick="goPage(lp)">末页</a>
			<label>
				<input id="pageNum" type="text" name="pageNum" style="width: 30px;">
			</label><a href="javascript:void(0);" onclick="goPageByNum()">GO</a>
			<label>
				<select onchange="selectChange(this)">
					<option>2</option>
					<option>4</option>
					<option>6</option>
					<option>8</option>
				</select>
			</label>
			<span id="pageInfo"></span>
		</div>

		<hr>
		<div id="userDetails">
			<%--<table border="1px solid cadetblue" cellpadding="5px" width="300px">
				<tr>
					<td width="25%">编号:</td>
					<td width="25%">1</td>
					<td width="25%">名称:</td>
					<td width="25%">tom</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td colspan="3">232</td>
				</tr>
				<tr>
					<td>地址:</td>
					<td colspan="3">123132434234</td>
				</tr>
			</table>--%>
		</div>

		<hr>

		<div id="newUser">
			<form id="userForm" onsubmit="return saveUser()">
				<input type="hidden" name="id">
				名称:<label>
				<input type="text" name="fullname" id="fullname">
			</label><br>
				密码:<label>
				<input type="text" name="password" id="password">
			</label><br>
				<input type="submit" id="saveBtn" value="保存">
			</form>
		</div>
	</body>
</html>














